<template>
    <div class="Search">
        <el-form label-width="100px">
            <el-form-item label="搜索提示文字">
                <el-input v-model="list.title" clearable></el-input>
            </el-form-item>
            <el-form-item label="背景颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.SearchColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.SearchColor ='#fff'}">重置</el-button>
                </div>
            </el-form-item>
            <!-- <el-form-item label="透明度">
                <el-slider v-model="list.backgroundOpacity" :max="1" :min="0" :step="0.1"></el-slider>
            </el-form-item> -->
            <el-form-item label="搜索框背景">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.backgroundInput" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.backgroundInput ='#F2F2F2'}">重置</el-button>
                </div>
            </el-form-item>
            <el-form-item label="是否边框">
                <el-switch v-model="list.isBorder">
                </el-switch>
            </el-form-item>
            <el-form-item label="右边控件">
                <el-switch v-model="list.action">
                </el-switch>
            </el-form-item>
            <el-form-item label="清除控件">
                <el-switch v-model="list.clearabled">
                </el-switch>
            </el-form-item>
            <!-- <el-form-item label="控件颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.actionColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.actionColor ='#444'}">重置</el-button>
                </div>
            </el-form-item> -->
            <el-form-item label="边框颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.BorderColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.BorderColor ='#D9CECE'}">重置</el-button>
                </div>
            </el-form-item>
            <el-form-item label="文字颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.InputTextColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.InputTextColor ='#999'}">重置</el-button>
                </div>
            </el-form-item>
            <el-form-item label="对齐方式">
                <div style="display: flex;align-items: center;">
                    <el-radio-group v-model="list.InputTextAligh" size="small">
                        <el-radio-button label="left">左</el-radio-button>
                        <el-radio-button label="center">中</el-radio-button>
                        <el-radio-button label="right">右</el-radio-button>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="搜索框样式">
                <el-radio-group v-model="list.InputStyle">
                    <!-- <el-radio style="margin-right: 10px;" :label="0">直角</el-radio> -->
                    <el-radio style="margin-right: 10px;" :label="4">圆弧</el-radio>
                    <el-radio style="margin-right: 0px;" :label="20">圆角</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'Search',
        props: ['data', 'className'],
        data() {
            return {
                list: {}
            }
        },
        created() {
            // this.data.backgroundOpacity = 1
        },
        mounted() {
            // console.log(this.data);
            this.list = this.data
        },
        methods: {}
    }
</script>

<style lang="less" scoped>
    .Search {
        padding: 20px;
    }
</style>